讓我們實作一個阻擋使用者操作 Loading 的畫面吧。

? 隕石小故事

身為一個前端開發者，最大的敵人無非就是「使用者」了，使用者想法超出我們想像，永遠都有辦法找出程式的例外狀況xDD。當某些時候有些流程是需要等待的時候，如果使用者這時候還能夠進行其他操作時，那麼可能導致這次請求會操作可能會出現例外的情況，這時如果有一個加載畫面可以阻擋使用者畫面的話，就能預防使用者惡魔般的操作了?。

Overview

如前面小故事所述，某些需要等待的時候，如果讓使用者能夠隨意操作流程時很容易發生意外狀況，像是金流的流程，如果請求還沒發出或是還沒回應時，如果使用者還能夠進行操作時，可能會發生我們無法預期的狀況。而在這種需要等待回應的功能時，如果我們有一個加載畫面能夠讓使用者等待，並且無法進行其他操作（是情況能夠允許返回上一步或取消），就能減少意外狀況的發生。

開始實作

｜實作 Loading 畫面

這邊我們也能使用 D8 所學到的 Lottie 來做為我們的加載動畫 ??

因為我們會在許多畫面會需要加載動畫，所以在這邊我們會新建一個 LoadingViewController 的 Xib 來方便我們覆用它，這邊我們就簡單建立一個畫面：

這邊中間的白色的 View 為我們的 Loading 動畫，這邊我們使用 Lottie 的 AnimationView 來做，而背景是有透明度的黑色，接著讓我們 present 這個 LoadingViewController 看看成果：

這時候你會發現我們所 present 的 LoadingViewController 的背景會突然變成黑色的並且擋住了我們原有的內容，而這時候如果我們想要看到我們底下 ViewController 的內容，我們必須在 present LoadingViewController 之前設置 LoadingViewController 的 modalPresentationStyle 為 .overCurrentContext，接著運行看看：

這邊因為我們預設的 prsent 轉場方式為由下往上飛入的效果，但這種方式跳出 loading 畫面似乎有些突兀。因此，這邊我們也設定這個 loading 畫面 present 的轉場效果，將 .modalTransitionStyle 設為.crossDissolve 再次運行看看：

Mmmmm... 非常好，沒有之前飛入效果的那麼突兀。而我們呈現 Loading 畫面的程式碼如下，之後我們寫個方法讓他隨時都能被叫出來吧！

｜將 Loading 畫面放到擴充功能吧！

那我們要怎麼樣才能隨時呼叫這個 LoadingViewController 呢？答案很簡單，我們可以透過 extension 我們原有的 ViewController，並且新增一個 presentLoadingVC 的 functions：

這麼一來我們只需要在我們需要出現 loading 畫面出現的時候使用 presentLoadingVC 這個方法即可：

Summary

LOL 梗亂入抱歉。

那麼這次製作防止操作的 Loading 畫面教學就到這邊，希望大家學會做出一個具有透明度的 Loading 效果，並且能夠暫時讓使用者無法進行其他的操作，如果有更好的方式（阻擋使用者），也歡迎大家與我分享。